import React, { useState, useEffect } from 'react';
import { ServiceStorageStyled } from './style';
import ServiceStoragePie from './ServiceStoragePie';
import { ServiceStorageDTO } from '@/services/types';
import { getServiceStorageDetail } from '@/services/index';


const ServiceStorage = () => {
    const [serviceUseDbStoreage, setServiceUseDbStoreage] = useState<ServiceStorageDTO>({});
    const [serviceStoreage, setServiceStoreage] = useState<ServiceStorageDTO>({});

    // useEffect(() => {
    //     getServiceStorageDetail().then(res => {
    //         setServiceStoreage(res[0]);
    //         setServiceUseDbStoreage(res[1]);
    //     });
    // }, [serviceStoreage,serviceUseDbStoreage]);
    // useEffect(() => {
    //     getServiceStorageDetail().then(res => {
    //         
    //         setServiceStoreage(res[0]);
    //         setServiceUseDbStoreage(res[1]);
    //     });
    // }, []);

    return (
        <ServiceStorageStyled>
            <div className='serviceStoreage'>
                <div>
                    <ServiceStoragePie title="服务器使用率" percent={serviceStoreage.percent || ''} data={serviceStoreage.storage || []}
                    ></ServiceStoragePie>
                </div>
                <div>

                </div>
                <div className='serviceUsing'>
                    <div>
                        服务器总使用<div className='serviceUsingNumber'>
                            {((serviceStoreage.storage || [])[1]?.number / (1024)).toFixed(2)} GB </div></div>
                    <div>
                        数据库使用<div className='serviceUsingNumber'>
                            {((serviceUseDbStoreage.storage || [])[0]?.number / (1024)).toFixed(2)} GB </div>
                        {/* (占比 <span className='serviceUsingNumber'>{serviceUseDbStoreage.percent}</span>%) */}
                    </div>
                    <div>
                        文件存储使用
                        <div className='serviceUsingNumber'>
                            {((serviceUseDbStoreage.storage || [])[1]?.number / (1024)).toFixed(2)} GB </div></div>
                </div>
                {/* <ServiceStoragePie title="数据库存储占比" percent={serviceUseDbStoreage.percent || ''} data={serviceUseDbStoreage.storage || []}></ServiceStoragePie> */}
            </div>
        </ServiceStorageStyled>
    );
}

export default ServiceStorage;
